*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
  padding: 10px;
}


$dark-shell-bg: rgba(0, 0, 0, 0.8);
$dark-split-border:1px solid #fff;
$dark-a-color:white;
$dark-a-hover-color: #677478;


$light-shell-bg: rgba(235, 235, 235, 0.8);
$light-split-border:1px solid #000;
$light-a-color: #000;
$light-a-hover-color: #677478;



.shell {
  min-width: 100px;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  &:hover{
    a{
      width: 160px;
      justify-content: space-around;
      .name{
        display: inline-block;
        width: 100px;
        opacity: 1;
      }
    }
  }
  a{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease-in-out;
    border-radius: 2px;
    text-decoration: none;
    &:hover {
      padding: 0 5px;
    }
    img{
      width: 30px;
      height: 30px;
    }
    span.name{
      opacity: 0;
      display: none;
    }
  }
}

@mixin getTheme($bg-color, $split-border,$a-color,$a-hover-color, $filter){
  background-color: $bg-color;
  a:first-child{
    border-bottom: $split-border;
  }
  a:nth-last-child(3){
    border-bottom: $split-border;
  }
  a{
    color: $a-color;
    &:hover{
      background-color: $a-hover-color;
    }
    img {
      filter: $filter;
    }
  }
}

.dark{
  @include getTheme($dark-shell-bg, $dark-split-border, $dark-a-color, $dark-a-hover-color, invert(1));
}

.light{
  @include getTheme($light-shell-bg, $light-split-border, $light-a-color, $light-a-hover-color, invert(0));
}
